import React, {useEffect, useState} from "react";
import {Dimensions, ScrollView, StyleSheet, Text, TextInput, TouchableHighlight, View} from "react-native";
import {cs, getBackgroundColor} from "./CommandCss/commandCss";
import {fontSize_15} from "./theme";
import {SvgXml} from "react-native-svg";
import {rightSvgXml, scanSvgXml} from "../libs/svgXml";
import {getChainInfo, initNet} from "./smartxL2Libs/L2_Data";
import {BottomSheet} from "react-native-elements/dist/bottomSheet/BottomSheet";
import {checkAddress_ETH} from "./smartxL2Libs/smartxL2Web3";
import SimpleToast from "react-native-simple-toast";

const {width,height,scale} = Dimensions.get("window");

const L2_AddressBookAddAddressView = ({navigation,route}:any) => {
    const [chainID,setChainID] = useState("")
    const [chainName,setChainName] = useState("")
    const [address,setAddress] = useState("")
    const [chainList,setChainList] = useState([{chainID:"",name:""}])
    const [showChainList,setShowChainList] = useState(false)
    useEffect(()=>{
        navigation.setOptions({
            title:"添加钱包地址",

        })
        initChianList();
    },[])
    const initChianList = async () => {
        let netList = await initNet();
        setChainList(netList)
    }
    return (
        <View style={styles.container}>
            <Text style={[cs.fs_14,cs.ta_l,cs.w_100]}>钱包网络</Text>
            <TouchableHighlight
                underlayColor={'transparent'}
                style={[cs.w_100]}
                onPress={()=>{
                    console.log(1)
                    setShowChainList(true)
                }}
                >
                <View style={[cs.w_100]}>
                    <TextInput
                        underlineColorAndroid={'transparent'}
                        placeholder= {`选择钱包网络`}
                        value={chainName}
                        style={[
                            cs.fs_15,cs.p0,cs.pr20,cs.w_100,
                            {color:"black",minHeight:40,lineHeight:20}
                            ]}
                        editable={false}
                    />
                    {
                        <SvgXml xml={rightSvgXml("#ababab")} width={22} height={22} style={{position:"absolute",right:10,bottom:10}}/>
                    }
                </View>
            </TouchableHighlight>
            <Text style={[cs.fs_14,cs.ta_l,cs.w_100,cs.mt10]}>钱包地址</Text>
            <View style={[cs.w_100]}>
                <TextInput
                    underlineColorAndroid={'transparent'}
                    placeholder= {`扫描或粘贴钱包地址`}
                    value={address}
                    multiline={true}
                    onChangeText={(value)=>{
                        setAddress(value.trim())
                    }}
                    style={[
                        cs.fs_15,cs.p0,cs.pr20,cs.w_100,
                        {color:"black",minHeight:40,lineHeight:20,maxWidth:width*0.8}
                    ]}
                    editable={true}
                />
                {
                    <SvgXml xml={scanSvgXml("#282828","#636363")} width={22} height={22} style={{position:"absolute",right:10,bottom:10}}/>
                }
            </View>
            <Text style={[
                cs.b20,cs.p10,cs.pl20,cs.pr20,
                cs.p_abs,cs.ta_c,cs.tav_c,
                cs.borderRadioHalf,getBackgroundColor(0),
                cs.c_w,cs.fs_13,cs.ls_half_0
            ]} onPress={()=>{
                if(chainID && address)
                {
                    let res = checkAddress_ETH(address);
                    console.log(`checkAddress_ETH:${res}`)
                    if(res)
                    {
                        let newAddressInfo = {chainID,chainName,address}
                        route?.params?.addNewInfo(newAddressInfo)
                        navigation.goBack();
                        return;
                    }
                    SimpleToast.show('地址错误，请检查地址')
                }
                else
                {
                    navigation.goBack();
                }
            }}>
                完成
            </Text>
            <BottomSheet
                modalProps={{animationType:"fade"}}
                isVisible={showChainList}
            >
                <TouchableHighlight
                    underlayColor={'transparent'}
                    style={{width:width,height:height,backgroundColor: 'rgba(0.5, 0.25, 0, 0.2)'}}
                    onPress={()=>{
                        setShowChainList(false)
                    }}
                >
                    <View style={[cs.f1,cs.w_100,cs.h_100,{justifyContent:"flex-end"}]}>
                        <View style={[cs.w_100,cs.bgc_w,{height: chainList.length*40,maxHeight:height*0.7}]}>
                            <ScrollView style={[cs.w_100,cs.bgc_w,{minHeight:0}]} contentContainerStyle={[cs.w_100,{minHeight:0}]}>
                                {
                                    chainList.length?
                                        chainList.map((item,index)=>(
                                            <Text style={[cs.fs_14,cs.ta_c,cs.w_100,cs.bgc_w,cs.tav_c,{height:40}]}
                                                  onPress={()=>{
                                                      setChainID(item.chainID)
                                                      setChainName(item.name)
                                                      setShowChainList(false)
                                                  }}
                                                  key={`chainList_${index}`}
                                            >{item.name}</Text>
                                        )):null
                                }
                            </ScrollView>
                        </View>
                    </View>
                </TouchableHighlight>
            </BottomSheet>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft:5,
        paddingRight: 5,
        paddingTop:10,
        backgroundColor: "white"
    },
})
export default L2_AddressBookAddAddressView;


